<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="/js/axios.min.js"></script>
  <script src="/js/util.js"></script>
  <script>
    window.onload = function (){
        findRole();
    }
    function findRole(){
        axios.get("/role/findAll",null).then(e=>{
            var info = e.data;
            var str ="";
            str+=`<div style="display: flex">`
            for (var i=0;i<info.length;i++){
            str+=`<input type='checkBox' name="roleArray" style="margin-left: 5px" value="${info[i].id}">${info[i].name}`
            }

            $("roleDiv").innerHTML = str;
        });
    }

    function getItem(){
        var idArray = [];
        var boxList = document.querySelectorAll(
            "#roleDiv [name='roleArray']:checked"
        );


        for (var i=0;i<boxList.length;i++){
            idArray.push(boxList[i].value);
        }
        return idArray;
        // axios.get("/role/add",{
        //     params:{
        //         account:$("account").value,
        //         name:$("name").value,
        //         gradeArray:idArray
        //     }
        // })
    }

    function findByGrade(){
        var roleArray = getItem();
        if (roleArray.length ==0){
            $("gradeDiv").innerHTML ="";
            return;
        }
        var params = new URLSearchParams();
        params.append("roleArray",roleArray);
        axios.post("/grade/findByRoleArray",params).then(e=>{
            var info = e.data;
            var str = "";
            for (var i=0;i<info.length;i++){
                str += info[i].grade+",";
            }
            $("gradeDiv").innerHTML = str;
        })
    }
    function addUser(){
        var params = new URLSearchParams();
        params.append("name",$("name").value);
        params.append("account",$("account").value);
        params.append("roleArray",getItem());
        axios.post("/user/add",params).then(e =>{
            if (e.data =="ok"){
                location.href="/user/user.html"
            }
        })
    }

  </script>
</head>
<body>
  <h2>添加用户</h2>
用户名:<input type="text" id="account">
真实姓名:<input type="text" id="name">
  拥有角色:<div id="roleDiv" style="width: 300px;" onclick="findByGrade()"></div>
  拥有权限：<div id="gradeDiv"></div>
<input type="button" onclick="addUser()" value="添加">
</body>
</html>